<template>
    <div>
        <div>
            <el-button style="float: right" type="primary" size="medium" @click="addProduction">+ 添加</el-button>
            <el-form :inline="true" :model="formUser" size="mini">
                <el-form-item label="产品名">
                    <el-input v-model="formUser.name" placeholder="用户名"></el-input>
                </el-form-item>
                <el-form-item label="状态">
                    <el-select v-model="formUser.status" placeholder="请选择">
                        <el-option
                                v-for="item in statusOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="requestSearchUser">查询</el-button>
                </el-form-item>
            </el-form>
        </div>

        <el-table
                :data="productionListData"
                style="width: 100%">
            <el-table-column
                    prop="name"
                    label="产品名"
            >
                <template slot-scope="scope">
                    <span v-if="scope.row.isSet">
                         <el-input size="mini" placeholder="请输入内容" v-model="selectRow.name"/>
                    </span>
                    <span v-else>{{scope.row.name}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="产品周期"
            >
                <template slot-scope="scope">
                    <span v-if="scope.row.isSet">
                         <el-input-number size="mini" placeholder="请输入内容" v-model="selectRow.period"/>天
                    </span>
                    <span v-else>{{scope.row.period}}天</span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="stopTime"
                    label="利率"
            >
                <template slot-scope="scope">
                    <span v-if="scope.row.isSet">
                         <el-input-number size="mini" placeholder="请输入内容" v-model="selectRow.moneyRate"/>%
                    </span>
                    <span v-else>{{scope.row.moneyRate}}%</span>
                </template>
            </el-table-column>

            <el-table-column
                    prop="price"
                    label="最低购买数量"
            >
                <template slot-scope="scope">
                    <span v-if="scope.row.isSet">
                        <el-input-number size="mini" placeholder="请输入内容" v-model="selectRow.startAmount"/>
                    </span>
                    <span v-else>{{scope.row.startAmount}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="totalDisplay"
                    label="未到期提出违约金比例"
            >
                <template slot-scope="scope">
                    <span v-if="scope.row.isSet">
                        <el-input-number size="mini" placeholder="请输入内容" v-model="selectRow.penaltyRate"/>%
                    </span>
                    <span v-else>{{scope.row.penaltyRate}}%</span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="total"
                    label="状态">
                <template slot-scope="scope">
                    <span v-if="scope.row.isSet">
                        <el-select v-model="selectRow.status" size="mini" placeholder="请选择">
                            <el-option
                                    v-for="item in statusOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                          </el-select>
                    </span>
                    <span v-else>{{scope.row.status == 0 ? '下线' : '上线'}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="createTime"
                    label="添加时间">
            </el-table-column>
            <el-table-column
                    prop="updateTime"
                    label="最后修改时间">
            </el-table-column>

            <el-table-column
                    label="操作"
                    width="220"
            >
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="requestProductionChange(scope.row,scope.$index,true)">
                        {{scope.row.isSet?'保存':"编辑"}}
                    </el-button>
                    <template v-if="!scope.row.isSet">
                        <el-button type="warning" size="mini" @click="requestProductionEnable(scope.row,scope.$index)">
                            {{scope.row.status == 0 ? '上线' : '下线'}}
                        </el-button>
                        <el-button v-if="scope.row.status == 0" type="danger" size="mini" @click="requestProductionDelete(scope.row,scope.$index)">
                            删除
                        </el-button>
                    </template>
                    <template v-else>
                        <el-button type="danger" size="mini"
                                   @click="requestProductionChange(scope.row,scope.$index,false)">取消
                        </el-button>
                    </template>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                background
                layout="total, sizes, prev, pager, next"
                :page-size="pagination.pageSize"
                :total="pagination.total"
                :page-sizes="[10, 50, 100]"
                @size-change="handleSizeChange"
                @current-change="currentChange"
                @prev-click="requestGetProductionList(pagination.prePage)"
                @next-click="requestGetProductionList(pagination.nextPage)"
        >
        </el-pagination>
    </div>
</template>

<script>

    let api = '/manager/product';

    export default {
        name: "ManageList",
        data() {
            return {
                selectRow: null,//选中行
                productionListData: [],
                formUser: {
                    product: '',
                    status: ''
                },
                statusOptions: [{
                    value: '',
                    label: '全部'
                },{
                    value: '0',
                    label: '下线'
                }, {
                    value: '1',
                    label: '上线'
                }],
                pagination: {
                    total: 0,
                    pageSize: 10,
                    prePage: 0,
                    pageNum: 1,
                    nextPage: 0,
                },
            }
        },
        mounted() {
            this.requestGetProductionList(this.pagination.pageNum);
        },
        methods: {
            requestGetProductionList(page) {
                this.requestAxios.requestCMS('post', api+'/get_list.do', {
                    page:page,
                    size:this.pagination.pageSize,
                    name: this.formUser.name,
                    status: this.formUser.status,
                }, (response) => {
                    let data = response.data.list;
                    let arr = [];
                    for (var i = 0; i < data.length; i++) {
                        data[i].isSet = false;
                        arr.push(data[i])
                    }
                    this.productionListData = arr;
                    this.pagination.total = response.data.total;
                    this.pagination.prePage = response.data.prePage;
                    this.pagination.pageNum = response.data.pageNum;
                    this.pagination.nextPage = response.data.nextPage;
                });
            },
            // 查询
            requestSearchUser() {
                this.requestGetProductionList(1);
            },
            //添加账号
            addProduction() {
                // console.log('add')
                for (let i of this.productionListData) {
                    if (i.isSet) return this.$message.warning("请先保存当前编辑项");
                }
                let initSelectRow = {
                    name: "",
                    period: "",
                    startAmount: "",
                    moneyRate: "",
                    status: "",
                    penaltyRate: "",
                    isSet: true,
                };
                this.productionListData.unshift(initSelectRow);
                this.selectRow = initSelectRow;
                // console.log('s = ', this.selectRow)
            },


            // 删除
            requestProductionDelete(row, index) {
                this.$confirm('此操作将永久删除该选项, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.requestAxios.requestCMS('post', api+'delete.do', {id: row.id}, (response) => {
                        this.$message({
                            type: 'success',
                            message: "删除成功!"
                        });
                        this.productionListData.splice(index, 1);
                        this.requestGetProductionList(this.pagination.pageNum);
                    });
                }).catch(() => {
                    this.$message.info("取消删除");
                });

            },
            //修改
            requestProductionChange(row, index, cg) {
                // 上线状态下无法编辑
                if(row.status == 1){
                    this.$message.warning('上线状态下无法编辑');
                    return false;
                }
                //点击修改 判断是否已经保存所有操作
                for (let i of this.productionListData) {
                    if (i.isSet && i.id != row.id) {
                        this.$message.warning("请先保存当前编辑项");
                        return false;
                    }
                }
                //是否是取消操作
                if (!cg) {
                    if (!this.selectRow.id){
                        this.productionListData.splice(index, 1);
                    } else{
                        row.isSet = !row.isSet;
                        this.requestGetProductionList(this.pagination.pageNum);
                    }
                    return
                }
                //提交数据
                if (row.isSet) {
                    if (row.id) {
                        this.updateProduction()
                    } else {
                        this.requestAddProduction()
                    }
                } else {
                    this.selectRow = row;
                    row.isSet = true;
                }
            },
            // 更新
            updateProduction() {
                this.requestAxios.requestCMS('post', api+'/edit.do', this.selectRow, (response) => {
                    this.$message({
                        type: 'success',
                        message: "保存成功!"
                    });
                    this.isSet = false;
                    this.requestGetProductionList(this.pagination.pageNum);
                });
            },
            // 添加
            requestAddProduction() {
                this.requestAxios.requestCMS('post', api+'/add.do', this.selectRow, (response) => {
                    this.$message({
                        type: 'success',
                        message: "添加成功!"
                    });
                    this.isSet = false;
                    this.requestGetProductionList(this.pagination.pageNum);
                });
            },
            // 上下线
            requestProductionEnable(row,index){
                this.requestAxios.requestCMS('post', api+'/enable.do', {
                    id:row.id,
                    status:row.status == 0 ? 1 : 0,
                }, (response) => {
                    this.$message({
                        type: 'success',
                        message: "成功!"
                    });
                    this.requestGetProductionList(this.pagination.pageNum);
                });
            },

            handleSizeChange(val) {
                this.pagination.pageSize = val;
                this.requestGetProductionList(this.pagination.pageNum)
            },
            currentChange(page) {
                this.requestGetProductionList(page)
            }

        }
    }
</script>

<style scoped>

</style>
